<template>
  <main class="main-wrapper">
    <div class="section">
      <div class="container-medium">
        <div class="padding-vertical">
          <div class="max-width-large">
            <h1 class="heading">Horizontal Scroll Is Cool!</h1>
          </div>
        </div>
      </div>
    </div>

    <ScrollSection 
      direction="horizontal" 
      :dataList="horizontalDataList"
    />

    <div class="section">
      <div class="container-medium">
        <div class="padding-vertical">
          <div class="max-width-large">
            <h1 class="heading">But Vertical Scroll Is Also Cool!</h1>
          </div>
        </div>
      </div>
    </div>

    <ScrollSection 
      direction="vertical" 
      :dataList="verticalDataList"
    />

    <div class="section">
      <div class="container-medium">
        <div class="padding-vertical">
          <div class="max-width-large">
            <h1 class="heading">Soo Cool!</h1>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import ScrollSection from './components/ScrollSection.vue';

const horizontalDataList = ref([
  { mainTitle: '1', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video1.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video1.mp4' },
  { mainTitle: '2', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video2.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video2.mp4' },
  { mainTitle: '3', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video3.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video3.mp4' }
]);

const verticalDataList = ref([
  { mainTitle: '1', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video1.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video1.mp4' },
  { mainTitle: '2', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video1.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video1.mp4' },
  { mainTitle: '3', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video1.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video1.mp4' },
  { mainTitle: '4', subTitle: 'Wildlife in Action: A Glimpse into Nature\'s Daily Drama', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'videos/video1.mp4', description: 'Witness the fascination lives of animals in the wild.', videoUrl: 'src/assets/videos/video1.mp4' }
]);
</script>

<style>
/* Add your global styles here if needed */
</style>